<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script src="js/vue.js"></script>
</head>
<body>
	
	<div id="app">
		<label for="product">商品：</label><input type="text" id="product" v-model="product" /><br />
		<label for="num">数量：</label><input type="number" id="num" v-model="num" /><br />
		<label for="price">价格：</label><input type="number" id="price" v-model="price" /><br />
		<button @click="addProduct">添加到购物车</button>
		<ul>
			<li v-for="item in shoppingCarts">{{conputeProduct(item)}}</li>
		</ul>
	</div>
	
	<script type="text/javascript">
		const app = new Vue({
			el: "#app",
			data: {
				product: "",
				num: 0,
				price: 0,
				shoppingCarts: []
			},
			computed: {
				conputeProduct() {
					return function(item) {
						return item.product + "的数量是" + item.num + ", 小计" + item.num * item.price;
					}
				}
			},
			methods: {
				addProduct() {
					if (this.product != '' && this.num > 0 && this.price > 0) {
						this.shoppingCarts.push({
							"product" : this.product,
							"num" : this.num,
							"price" : this.price
						})
					}
				}
			}
		})
	</script>
	
</body>
</html>